analog clock - 2

            <div class="clock_B">
              <div class="hour"><div class="hr" id="hr"></div></div>
              <div class="min"><div class="mn" id="mn"></div></div>
              <div class="sec"><div class="sc" id="sc"></div></div>
            </div>    
            <style>
                .clock_B {width: 30vw; height: 30vw; border-radius: 50%; margin: 0 auto;background-image: url("../images/21.jpg"); 
                background-size: cover; display: flex; justify-content: center; align-items: center; 
                box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05), inset 0 -15px 15px rgba(255, 255, 255, 0.05), 
                0 15px 15px rgba(0, 0, 0, 0.3), inset 0 15px 15px rgba(0, 0, 0, 0.3);}
                .clock_B::before {content: ""; width: 15px; height: 15px; position: absolute;
                background-color: #fff; border-radius: 50%; z-index: 1000;}
                .hour, .min, .sec { position: absolute;}
                .hr {width: 16vw; height: 16vw;}
                .mn {width: 19vw; height: 19vw;}
                .sc {width: 23vw; height: 23vw;}
                .hr, .mn, .sc {display: flex; justify-content: center;}
                .hr::before {content: ""; width: 0.6vw; height: 9vw; background-color: black;  z-index: 100; border-radius: 5px;}
                .mn::before {content: ""; width: 0.6vw; height: 10vw; background-color: yellow; z-index: 11; border-radius: 5px;}
                .sc::before { content: ""; width: 0.3vw; height: 14vw; background-color: red;  z-index: 10;  border-radius: 5px;}
            </style>
            <script>
                const hr = document.querySelector("#hr");
                const mn = document.querySelector("#mn");
                const sc = document.querySelector("#sc");
                
                setInterval(() => {
                let deg = 6; //360deg / 60(min||sec) => 6
                let day = new Date();
                let hh = day.getHours() * 30; //360deg / 12 hour => 30
                let mm = day.getMinutes() * deg;
                let ss = day.getSeconds() * deg;
                
                hr.style.transform = `rotateZ(${hh + mm / 12}deg)`;
                mn.style.transform = `rotateZ(${mm}deg)`;
                sc.style.transform = `rotateZ(${ss}deg)`;
                });
            </script>